<script setup>

import { onMounted, ref } from 'vue'
import { useUserStore } from '@/store/index.js'
import { ElMessage } from 'element-plus'
import { postUpdateMemberApi } from '@/apis/user'
import { Plus } from '@element-plus/icons-vue'

const filePrefix = process.env.VUE_APP_BASE_URL
const userStore = useUserStore()
const userinfo = ref({})

onMounted(() => {
  //浅拷贝一份 防止污染pinia的数据
  userinfo.value = {...userStore.userInfo}
  console.log(userinfo);
})


const onSubmit = async () => {
  console.log(userinfo.value);
  const res = await postUpdateMemberApi(userinfo.value)
  if (res.code == 200) {
    userStore.updateUserinfo(userinfo.value)
    ElMessage({type: 'success', message: `保存成功`})
  }
}

const rules = {

  name: [
    {required: true, message: '请输入姓名', trigger: 'blur'},
  ],

  school: [
    {required: true, message: '请输入学校', trigger: 'blur'},

  ],
  sex: [
    {required: true, message: '请输入性别', trigger: 'blur'},

  ],
  grade: [
    {required: true, message: '请输入年级', trigger: 'blur'},
  ],

  academy: [
    {required: true, message: '请输入学院', trigger: 'blur'},

  ],
  age: [
    {required: true, message: '请输入年龄', trigger: 'blur'},

  ],

}

const option = [
  {
    value: '2019级',
    label: '2019级',
  },
  {
    value: '2020级',
    label: '2020级',
  },
  {
    value: '2021级',
    label: '2021级',
  },
  {
    value: '2022级',
    label: '2022级',
  },
  {
    value: '2023级',
    label: '2023级',
  },
]

//上传成功
const handleAvatarSuccess = function (response) {
  userinfo.value.avatar = 'http://manager.wentexl.cn/' + response.data
  userStore.updateUserinfo(userinfo.value)
}


</script>

<template>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 24px">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>个人信息</el-breadcrumb-item>
  </el-breadcrumb>

  <div class='contain'>
    <el-form :inline="true" :model="userinfo" class="demo-form-inline" label-width=auto label-position='center'
             :rules="rules">
      <el-row>
        <el-col :span="8">
          <el-form-item label="头像" class="custom-form-item">

            <!-- 里面加一个文件上传 -->
            <!--<el-upload action="http://manager.wentexl.cn/api/yuhuan/erp/tob/personal/user/upload"-->
            <el-upload :action="filePrefix + '/api/yuhuan/erp/tob/personal/user/upload'"
                       :show-file-list="false " method="POST" with-credentials="true" :on-success="handleAvatarSuccess">
              <el-avatar :size="64" :src=userinfo.avatar v-if="userinfo.avatar">
                <!-- 当有src时，这里不会显示任何内容 -->
              </el-avatar>
              <el-icon v-else class="avatar-uploader-icon avatar-upload-prompt">
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="用户名" size="middle">
            <el-input disabled v-model=userinfo.username />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名" prop="name" size="middle">
            <el-input label-position='left' v-model=userinfo.name />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="中文花名">
            <el-input disabled v-model=userinfo.aliasName />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>

        <el-col :span="8">
          <el-form-item label="学号">
            <el-input disabled v-model=userinfo.stuId />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学校" prop="school">
            <el-input v-model=userinfo.school />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="sex">
            <el-input v-model=userinfo.sex />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>

        <el-col :span="8">

          <el-form-item label="年龄" prop="age">
            <el-input v-model=userinfo.age />
          </el-form-item>
        </el-col>
        <el-col :span="8">

          <el-form-item label="工作组">
            <el-input disabled v-model=userinfo.groupName />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="岗位">
            <el-input disabled v-model=userinfo.stationName />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="8">
          <el-form-item label="学院" prop="academy">
            <el-input v-model=userinfo.academy />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年级" prop="academy">
            <el-select v-model=userinfo.grade class="m-2" placeholder="Select" size="middle" style="width: 180px;">
              <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <br>
    </el-form>

    <el-button type="primary" @click="onSubmit">保存</el-button>

  </div>
</template>

<style lang="less" scoped>
.demo-form-inline .el-input .el-select {
  // --el-input-width: 300px;
  margin-left: 20px;

}

.el-select {
  width: 90%;
}

.el-button {
  margin-left: 45%;
}

:deep(.el-table__inner-wrapper) {
  height: 100% !important;
}

.contain {

  width: 60%
}

.custom-form-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-upload-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  /* 与el-avatar的size保持一致 */
  width: 64px;
  /* 与el-avatar的size保持一致 */
  border-radius: 50%;
  /* 圆形边框 */
  background-color: #f5f7fa;
  /* 背景色可以根据需要调整 */
  cursor: pointer;
  /* 鼠标悬停时变为可点击状态 */
}
</style>
